<template>
  <div class="common-layout linear-gradient">
    <el-container>
      <el-header class="header-container">
        <div class="headerTitle">查询条件</div>
        <div class="header-content">
          <el-form :model="headerSearchForm" label-width="auto" class="header-search-form">
            <el-form-item label="钢种族分档号">
              <el-select v-model="headerSearchForm.ypClass" placeholder="请选择" style="width:120px" size="small">
                <el-option label="全部" value="" />
                <el-option v-for="item in steelGradeRangeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="宽度分档号">
              <el-select v-model="headerSearchForm.widthClass" placeholder="请选择" style="width:120px" size="small">
                <el-option label="全部" value="" />
                <el-option v-for="item in widthRangeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="厚度分档号">
                <el-select v-model="headerSearchForm.thicknessClass" placeholder="请选择" style="width:120px" size="small">
                  <el-option label="全部" value="" />
                  <el-option v-for="item in thicknessRangeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            



          </el-form>
          <div class="header-buttons">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleExport">导出</el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="table-container-main">
          <el-table :data="tableData" :cell-class-name="bandCellClassName"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            :row-class-name="tableRowClassName">
            <el-table-column prop="serialNumber" label="序号" fixed="left" width="60">
              <template #default="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="coilno" label="冷轧卷号" width="130"/>
            <el-table-column prop="steelGrade" label="钢种" width="100" />
            <el-table-column prop="enWidth" label="入口宽度(mm)" width="100" />
            <el-table-column prop="enThick" label="入口厚度(mm)" width="100" />
            <el-table-column prop="exWidth" label="出口宽度(mm)" width="100" />
            <el-table-column prop="exThick" label="出口厚度(mm)" width="100" />
            <el-table-column prop="ypClass" label="钢种族分档号" width="110"/>
            <el-table-column prop="widthClass" label="宽度分档号" width="100"/>
            <el-table-column prop="thicknessClass" label="厚度分档号" width="100"/>
            <el-table-column prop="lrncnt" label="自学习卷数" width="100"/>
            <!-- 改为与 acidrollingproduct.vue 一致的 S1~S5 分列显示 -->
            <el-table-column label="优化前压下率" header-align="center">
              <el-table-column prop="s1Light" label="S1" width="80" />
              <el-table-column prop="s2Light" label="S2" width="80" />
              <el-table-column prop="s3Light" label="S3" width="80" />
              <el-table-column prop="s4Light" label="S4" width="80" />
              <el-table-column prop="s5Light" label="S5" width="80" />
            </el-table-column>
            <el-table-column label="优化后压下率" header-align="center">
              <el-table-column prop="s1New" label="S1" width="80" />
              <el-table-column prop="s2New" label="S2" width="80" />
              <el-table-column prop="s3New" label="S3" width="80" />
              <el-table-column prop="s4New" label="S4" width="80" />
              <el-table-column prop="s5New" label="S5" width="80" />
            </el-table-column>
            <!-- <el-table-column label="优化前压下率占比" header-align="center">
              <el-table-column prop="s1LightPer" label="S1(%)" width="100px" />
              <el-table-column prop="s2LightPer" label="S2(%)" width="100px" />
              <el-table-column prop="s3LightPer" label="S3(%)" width="100px" />
              <el-table-column prop="s4LightPer" label="S4(%)" width="100px" />
              <el-table-column prop="s5LightPer" label="S5(%)" width="100px" />
            </el-table-column> -->
            <el-table-column label="优化后压下率占比" header-align="center">
              <el-table-column prop="redsFinal1New" label="S1(%)" width="80" />
              <el-table-column prop="redsFinal2New" label="S2(%)" width="80" />
              <el-table-column prop="redsFinal3New" label="S3(%)" width="80" />
              <el-table-column prop="redsFinal4New" label="S4(%)" width="80" />
              <el-table-column prop="redsFinal5New" label="S5(%)" width="80" />
            </el-table-column>
            <el-table-column label="理论最大速度" header-align="center">
              <el-table-column prop="maxspeedOld" label="优化前" width="80" />
              <el-table-column prop="maxspeedNew" label="优化后" width="80" />
            </el-table-column>
            <el-table-column label="优化前轧制力" header-align="center">
              <el-table-column prop="rollingforceset1" label="S1" width="80" />
              <el-table-column prop="rollingforceset2" label="S2" width="80" />
              <el-table-column prop="rollingforceset3" label="S3" width="80" />
              <el-table-column prop="rollingforceset4" label="S4" width="80" />
              <el-table-column prop="rollingforceset5" label="S5" width="80" />
            </el-table-column>
            <el-table-column label="优化后轧制力" header-align="center">
              <el-table-column prop="rollingforceset1New" label="S1" width="80" />
              <el-table-column prop="rollingforceset2New" label="S2" width="80" />
              <el-table-column prop="rollingforceset3New" label="S3" width="80" />
              <el-table-column prop="rollingforceset4New" label="S4" width="80" />
              <el-table-column prop="rollingforceset5New" label="S5" width="80" />
            </el-table-column>
            <el-table-column label="优化前电机扭矩" header-align="center">
              <el-table-column prop="motormomentSet1" label="S1" width="80" />
              <el-table-column prop="motormomentSet2" label="S2" width="80" />
              <el-table-column prop="motormomentSet3" label="S3" width="80" />
              <el-table-column prop="motormomentSet4" label="S4" width="80" />
              <el-table-column prop="motormomentSet5" label="S5" width="80" />
            </el-table-column>
            <el-table-column label="优化后电机扭矩" header-align="center">
              <el-table-column prop="motormomentSet1New" label="S1" width="80" />
              <el-table-column prop="motormomentSet2New" label="S2" width="80" />
              <el-table-column prop="motormomentSet3New" label="S3" width="80" />
              <el-table-column prop="motormomentSet4New" label="S4" width="80" />
              <el-table-column prop="motormomentSet5New" label="S5" width="80" />
            </el-table-column>
            <el-table-column label="优化前功率" header-align="center">
              <el-table-column prop="motorpower1" label="S1" width="80" />
              <el-table-column prop="motorpower2" label="S2" width="80" />
              <el-table-column prop="motorpower3" label="S3" width="80" />
              <el-table-column prop="motorpower4" label="S4" width="80" />
              <el-table-column prop="motorpower5" label="S5" width="80" />
            </el-table-column>
            <el-table-column label="优化后功率" header-align="center">
              <el-table-column prop="motorpower1New" label="S1" width="80" />
              <el-table-column prop="motorpower2New" label="S2" width="80" />
              <el-table-column prop="motorpower3New" label="S3" width="80" />
              <el-table-column prop="motorpower4New" label="S4" width="80" />
              <el-table-column prop="motorpower5New" label="S5" width="80" />
            </el-table-column>
            
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 50]" :total="pagination.total" layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </el-main>
    </el-container>
    


  </div>
</template>
<script lang="ts">
import { ref, reactive, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
import { ElMessage } from 'element-plus';
import '/@/views/RollingSimulation/rollingSimulationModelCommonStyle.less';
import { rollingSimulationApi } from '/@/api/RollingSimulation/index';

// Interface for Search Form
interface SearchForm {
  coilno: string;
  ypClass: string;
  widthClass: string;
  thicknessClass: string;
}

// Interface for API request parameters
interface FindDataParams {
  coilno?: string;
  ypClass?: string;
  widthClass?: string;
  thicknessClass?: string;
  pageIndex: string;
  pageSize: string;
}

// Interface for API response data item
interface LoadDistributionDataRecord {
  coilNo: string;
  steelGrade: string;
  enWidth?: number;
  enThick?: number;
  exWidth?: number;
  exThick?: number;
  ypClass: string;
  widthClass: string;
  thicknessClass: string;
  lrncnt:string;
  // 优化前压下率
  s1Light?: number; s2Light?: number; s3Light?: number; s4Light?: number; s5Light?: number;
  // 优化后压下率
  s1New?: number; s2New?: number; s3New?: number; s4New?: number; s5New?: number;
  // 优化前轧制力
  rollingforceset1?: number; rollingforceset2?: number; rollingforceset3?: number; rollingforceset4?: number; rollingforceset5?: number;
  // 优化后轧制力
  rollingforceset1New?: number; rollingforceset2New?: number; rollingforceset3New?: number; rollingforceset4New?: number; rollingforceset5New?: number;
  // 优化前电机扭矩
  motormomentSet1?: number; motormomentSet2?: number; motormomentSet3?: number; motormomentSet4?: number; motormomentSet5?: number;
  // 优化后电机扭矩
  motormomentSet1New?: number; motormomentSet2New?: number; motormomentSet3New?: number; motormomentSet4New?: number; motormomentSet5New?: number;
  // 优化前功率
  motorpower1?: number; motorpower2?: number; motorpower3?: number; motorpower4?: number; motorpower5?: number;
  // 优化后功率
  motorpower1New?: number; motorpower2New?: number; motorpower3New?: number; motorpower4New?: number; motorpower5New?: number;
  // 理论最大速度
  maxspeedOld?: number; // 优化前
  maxspeedNew?: number; // 优化后

  redsFinal1New?:number;
  redsFinal2New?:number;
  redsFinal3New?:number;
  redsFinal4New?:number;
  redsFinal5New?:number;
}





// (removed several unused interface declarations)

export default defineComponent({
  name: 'DataDictionary',
  setup() {

    const headerSearchForm = reactive<SearchForm>({
      coilno:'',
      ypClass: '',
      widthClass: '',
      thicknessClass: ''
    });

    const steelGradeRangeOptions = ref([
      { label: '1', value: '1' },
      { label: '2', value: '2' },
      { label: '3', value: '3' },
      { label: '4', value: '4' },
      { label: '5', value: '5' },
      { label: '6', value: '6' },
      { label: '7', value: '7' },
      { label: '8', value: '8' },
      { label: '9', value: '9' },
      { label: '10', value: '10' },
      { label: '11', value: '11' },
      { label: '12', value: '12' },
      { label: '13', value: '13' },
      { label: '14', value: '14' },
      { label: '15', value: '15' },
      { label: '16', value: '16' },
      { label: '17', value: '17' },
      { label: '18', value: '18' },
      { label: '19', value: '19' },
      { label: '20', value: '20' },
      { label: '21', value: '21' },
      { label: '22', value: '22' },
      { label: '23', value: '23' },
      { label: '24', value: '24' },
      { label: '25', value: '25' },
      { label: '26', value: '26' },
      { label: '27', value: '27' },
      { label: '28', value: '28' },
      { label: '29', value: '29' },
      { label: '30', value: '30' },
      { label: '31', value: '31' },
      { label: '32', value: '32' },
      { label: '33', value: '33' },
      { label: '34', value: '34' },
      { label: '35', value: '35' },
      { label: '36', value: '36' },

      
    ])

    // 宽度分档范围选项
    const widthRangeOptions = ref([
      { label: '[0,1000)', value: '0' },
      { label: '[1000,1250)', value: '1' },
      { label: '[1250,1450)', value: '2' },
      { label: '[1450,1650)', value: '3' },
      { label: '[1650,1850)', value: '4' },
      { label: '[1850,2050)', value: '5' },
      { label: '[2050,9999)', value: '6' }
    ])

    // 厚度分档范围选项
    const thicknessRangeOptions = ref([
      { label: '[0.25,0.325)', value: '0' },
      { label: '[0.325,0.375)', value: '1' },
      { label: '[0.375,0.425)', value: '2' },
      { label: '[0.425,0.475)', value: '3' },
      { label: '[0.475,0.575)', value: '4' },
      { label: '[0.575,0.675)', value: '5' },
      { label: '[0.675,0.825)', value: '6' },
      { label: '[0.825,0.925)', value: '7' },
      { label: '[0.925,1.05)', value: '8' },
      { label: '[1.05,1.25)', value: '9' },
      { label: '[1.25,1.55)', value: '10' },
      { label: '[1.55,1.85)', value: '11' },
      { label: '[1.85,2.1)', value: '12' },
      { label: '[2.1,2.60)', value: '13' },
      { label: '[2.60,9.9)', value: '14' }
    ])

    const tableData = ref<LoadDistributionDataRecord[]>([]);



    const pagination = reactive({
      currentPage: 1,
      pageSize: 50,
      total: 0,
    });

    const handleResize = () => {
      nextTick(() => {
      });
    };

    // 纵向分组：每5个列为一组，整组显示浅蓝色背景
    function bandCellClassName({ column }: { column: any }) {
      const prop: string = column?.property || '';
      
      // 定义需要分组的列，按组排列
      const groupedColumns = [
        // 第1组：优化前压下率 (5列)
        's1Light', 's2Light', 's3Light', 's4Light', 's5Light',
        // 第2组：优化后压下率 (5列)
        's1New', 's2New', 's3New', 's4New', 's5New',
        // 第3组：优化后压下率占比 (5列)
        'redsFinal1New', 'redsFinal2New', 'redsFinal3New', 'redsFinal4New', 'redsFinal5New',
        // 第4组：理论最大速度 (2列)
        'maxspeedOld', 'maxspeedNew',
        // 第5组：优化前轧制力 (5列)
        'rollingforceset1', 'rollingforceset2', 'rollingforceset3', 'rollingforceset4', 'rollingforceset5',
        // 第6组：优化后轧制力 (5列)
        'rollingforceset1New', 'rollingforceset2New', 'rollingforceset3New', 'rollingforceset4New', 'rollingforceset5New',
        // 第7组：优化前电机扭矩 (5列)
        'motormomentSet1', 'motormomentSet2', 'motormomentSet3', 'motormomentSet4', 'motormomentSet5',
        // 第8组：优化后电机扭矩 (5列)
        'motormomentSet1New', 'motormomentSet2New', 'motormomentSet3New', 'motormomentSet4New', 'motormomentSet5New',
        // 第9组：优化前功率 (5列)
        'motorpower1', 'motorpower2', 'motorpower3', 'motorpower4', 'motorpower5',
        // 第10组：优化后功率 (5列)
        'motorpower1New', 'motorpower2New', 'motorpower3New', 'motorpower4New', 'motorpower5New'
      ];
      
      const columnIndex = groupedColumns.indexOf(prop);
      if (columnIndex === -1) return '';
      
      // 计算当前列属于第几组
      let groupIndex = 0;
      let currentPosition = 0;
      
      // 定义每组的大小
      const groupSizes = [5, 5, 5, 2, 5, 5, 5, 5, 5, 5];
      
      for (let i = 0; i < groupSizes.length; i++) {
        if (columnIndex < currentPosition + groupSizes[i]) {
          groupIndex = i;
          break;
        }
        currentPosition += groupSizes[i];
      }
      
      // 偶数组显示浅蓝色背景
      return groupIndex % 2 === 0 ? 'band-blue' : '';
    }

    


    // =============== 列表 S1~S5 展示格式化 ===============
    const joinS1toS5 = (arr: (number | string | undefined)[], unit?: string, fixed?: number) => {
      const fmt = (v: any) => {
        if (v === null || v === undefined || v === '') return '-';
        const num = Number(v);
        if (Number.isFinite(num)) return fixed !== undefined ? num.toFixed(fixed) : String(num);
        return String(v);
      };
      const result = arr.map(fmt).join(' / ');
      return unit ? `${result}${unit ? '' : ''}` : result;
    };

    const formatLightS1toS5 = (row: Partial<LoadDistributionDataRecord>) => {
      return joinS1toS5([row.s1Light, row.s2Light, row.s3Light, row.s4Light, row.s5Light], undefined, 3);
    };
    const formatLightNewS1toS5 = (row: Partial<LoadDistributionDataRecord>) => {
      return joinS1toS5([row.s1New, row.s2New, row.s3New, row.s4New, row.s5New]);
    };
    



    const fetchTableData = async () => {
      try {
        const params: FindDataParams = {
          coilno: headerSearchForm.coilno || undefined,
          ypClass: headerSearchForm.ypClass || undefined,
          widthClass: headerSearchForm.widthClass || undefined,
          thicknessClass: headerSearchForm.thicknessClass || undefined,
          pageIndex: String(pagination.currentPage),
          pageSize: String(pagination.pageSize),
        };

        Object.keys(params).forEach(key => {
          if (params[key as keyof FindDataParams] === undefined) {
            delete params[key as keyof FindDataParams];
          }
        });

        const response = await rollingSimulationApi.findLoadDistributionData(params);

        if (response && response.data && Array.isArray(response.data.data)) {
          const responsePayload = response.data;
          const records = responsePayload.data;

          const mappedData = records.map((record: LoadDistributionDataRecord) => {
            // 计算优化前压下率占比（S1~S5）= 当前项/合计 * 100，保留两位小数
            const s1Num = Number(record.s1Light) || 0
            const s2Num = Number(record.s2Light) || 0
            const s3Num = Number(record.s3Light) || 0
            const s4Num = Number(record.s4Light) || 0
            const s5Num = Number(record.s5Light) || 0
            const sumLight = s1Num + s2Num + s3Num + s4Num + s5Num
            const toPct = (val: number) => (sumLight > 0 ? ((val / sumLight) * 100).toFixed(0) : '-')

            // 计算优化后压下率占比（S1~S5）= 当前项/合计 * 100，保留两位小数
            const n1Num = Number(record.s1New) || 0
            const n2Num = Number(record.s2New) || 0
            const n3Num = Number(record.s3New) || 0
            const n4Num = Number(record.s4New) || 0
            const n5Num = Number(record.s5New) || 0
            const sumNew = n1Num + n2Num + n3Num + n4Num + n5Num
            const toPctNew = (val: number) => (sumNew > 0 ? ((val / sumNew) * 100).toFixed(0) : '-')

            return {
              // 基本信息
            coilno: record.coilNo ?? '-',
            steelGrade: record.steelGrade ?? '-',
              enWidth: record.enWidth ?? '-',
              enThick: record.enThick ?? '-',
              exWidth: record.exWidth ?? '-',
              exThick: record.exThick ?? '-',
            ypClass: record.ypClass ?? '-',
            widthClass: record.widthClass ?? '-',
            thicknessClass: record.thicknessClass ?? '-',
              lrncnt: record.lrncnt ?? '-',

              // 优化前压下率
              s1Light: record.s1Light !== undefined ? Number(record.s1Light).toFixed(2) : '-',
              s2Light: record.s2Light !== undefined ? Number(record.s2Light).toFixed(2) : '-',
              s3Light: record.s3Light !== undefined ? Number(record.s3Light).toFixed(2) : '-',
              s4Light: record.s4Light !== undefined ? Number(record.s4Light).toFixed(2) : '-',
              s5Light: record.s5Light !== undefined ? Number(record.s5Light).toFixed(2) : '-',

              // 优化前压下率占比（%）
              s1LightPer: toPct(s1Num),
              s2LightPer: toPct(s2Num),
              s3LightPer: toPct(s3Num),
              s4LightPer: toPct(s4Num),
              s5LightPer: toPct(s5Num),

              // 优化后压下率
              s1New: record.s1New !== undefined ? Number(record.s1New).toFixed(2) : '-',
              s2New: record.s2New !== undefined ? Number(record.s2New).toFixed(2) : '-',
              s3New: record.s3New !== undefined ? Number(record.s3New).toFixed(2) : '-',
              s4New: record.s4New !== undefined ? Number(record.s4New).toFixed(2) : '-',
              s5New: record.s5New !== undefined ? Number(record.s5New).toFixed(2) : '-',

              // 优化后压下率占比（%）
              s1NewPer: toPctNew(n1Num),
              s2NewPer: toPctNew(n2Num), 
              s3NewPer: toPctNew(n3Num),
              s4NewPer: toPctNew(n4Num),
              s5NewPer: toPctNew(n5Num),

              // 理论最大速度
              maxspeedOld: record.maxspeedOld !== undefined ? Number(record.maxspeedOld).toFixed(2) : '-',
              maxspeedNew: record.maxspeedNew !== undefined ? Number(record.maxspeedNew).toFixed(2) : '-',

              redsFinal1New: record.redsFinal1New !== undefined ? Number(record.redsFinal1New).toFixed(2) : '-',
              redsFinal2New: record.redsFinal2New !== undefined ? Number(record.redsFinal2New).toFixed(2) : '-',
              redsFinal3New: record.redsFinal3New !== undefined ? Number(record.redsFinal3New).toFixed(2) : '-',
              redsFinal4New: record.redsFinal4New !== undefined ? Number(record.redsFinal4New).toFixed(2) : '-',
              redsFinal5New: record.redsFinal5New !== undefined ? Number(record.redsFinal5New).toFixed(2) : '-',

              // 优化前轧制力
              rollingforceset1: record.rollingforceset1 !== undefined ? Number(record.rollingforceset1).toFixed(2) : '-',
              rollingforceset2: record.rollingforceset2 !== undefined ? Number(record.rollingforceset2).toFixed(2) : '-',
              rollingforceset3: record.rollingforceset3 !== undefined ? Number(record.rollingforceset3).toFixed(2) : '-',
              rollingforceset4: record.rollingforceset4 !== undefined ? Number(record.rollingforceset4).toFixed(2) : '-',
              rollingforceset5: record.rollingforceset5 !== undefined ? Number(record.rollingforceset5).toFixed(2) : '-',

              // 优化后轧制力
              rollingforceset1New: record.rollingforceset1New !== undefined ? Number(record.rollingforceset1New).toFixed(2) : '-',
              rollingforceset2New: record.rollingforceset2New !== undefined ? Number(record.rollingforceset2New).toFixed(2) : '-',
              rollingforceset3New: record.rollingforceset3New !== undefined ? Number(record.rollingforceset3New).toFixed(2) : '-',
              rollingforceset4New: record.rollingforceset4New !== undefined ? Number(record.rollingforceset4New).toFixed(2) : '-',
              rollingforceset5New: record.rollingforceset5New !== undefined ? Number(record.rollingforceset5New).toFixed(2) : '-',

              // 优化前电机扭矩
              motormomentSet1: record.motormomentSet1 !== undefined ? Number(record.motormomentSet1).toFixed(2) : '-',
              motormomentSet2: record.motormomentSet2 !== undefined ? Number(record.motormomentSet2).toFixed(2) : '-',
              motormomentSet3: record.motormomentSet3 !== undefined ? Number(record.motormomentSet3).toFixed(2) : '-',
              motormomentSet4: record.motormomentSet4 !== undefined ? Number(record.motormomentSet4).toFixed(2) : '-',
              motormomentSet5: record.motormomentSet5 !== undefined ? Number(record.motormomentSet5).toFixed(2) : '-',

              // 优化后电机扭矩
              motormomentSet1New: record.motormomentSet1New !== undefined ? Number(record.motormomentSet1New).toFixed(2) : '-',
              motormomentSet2New: record.motormomentSet2New !== undefined ? Number(record.motormomentSet2New).toFixed(2) : '-',
              motormomentSet3New: record.motormomentSet3New !== undefined ? Number(record.motormomentSet3New).toFixed(2) : '-',
              motormomentSet4New: record.motormomentSet4New !== undefined ? Number(record.motormomentSet4New).toFixed(2) : '-',
              motormomentSet5New: record.motormomentSet5New !== undefined ? Number(record.motormomentSet5New).toFixed(2) : '-',

              // 优化前功率
              motorpower1: record.motorpower1 !== undefined ? Number(record.motorpower1).toFixed(2) : '-',
              motorpower2: record.motorpower2 !== undefined ? Number(record.motorpower2).toFixed(2) : '-',
              motorpower3: record.motorpower3 !== undefined ? Number(record.motorpower3).toFixed(2) : '-',
              motorpower4: record.motorpower4 !== undefined ? Number(record.motorpower4).toFixed(2) : '-',
              motorpower5: record.motorpower5 !== undefined ? Number(record.motorpower5).toFixed(2) : '-',

              // 优化后功率
              motorpower1New: record.motorpower1New !== undefined ? Number(record.motorpower1New).toFixed(2) : '-',
              motorpower2New: record.motorpower2New !== undefined ? Number(record.motorpower2New).toFixed(2) : '-',
              motorpower3New: record.motorpower3New !== undefined ? Number(record.motorpower3New).toFixed(2) : '-',
              motorpower4New: record.motorpower4New !== undefined ? Number(record.motorpower4New).toFixed(2) : '-',
              motorpower5New: record.motorpower5New !== undefined ? Number(record.motorpower5New).toFixed(2) : '-',
            };
          });
          tableData.value = mappedData;
          pagination.total = responsePayload.count;
          ElMessage.success(responsePayload.msg || '查询成功');
        } else {
          ElMessage.info(response?.data?.msg || '未查询到数据或响应格式不正确');
          tableData.value = [];
          pagination.total = 0;
        }


      } catch (error: any) {
        console.error('获取数据失败:', error);
        ElMessage.error(error.response?.data?.msg || error.message || '获取数据失败');
        tableData.value = [];
        pagination.total = 0;
      }
    };

    const handleSearch = () => {
      pagination.currentPage = 1;
      fetchTableData();
    };

    const handleReset = () => {
      (Object.keys(headerSearchForm) as Array<keyof SearchForm>).forEach((key) => {
        headerSearchForm[key] = '';
      });
      handleSearch();
    };



    const handleSizeChange = (val: number) => {
      pagination.pageSize = val;
      fetchTableData();
    };

    const handleCurrentChange = (val: number) => {
      pagination.currentPage = val;
      fetchTableData();
    };

    // 导出方法
    const handleExport = async () => {
      // TODO: 实现导出逻辑
      const params = {
          ypClass: headerSearchForm.ypClass || undefined,
          widthClass: headerSearchForm.widthClass || undefined,
          thicknessClass: headerSearchForm.thicknessClass || undefined,
      };
      try {
        await rollingSimulationApi.exportLoadDistributionXlsx(params);
        ElMessage.success('导出成功');
      } catch (error) {
        ElMessage.error('导出失败');
      }
    };

    // 行样式
    const tableRowClassName = (row: any) => {
      if (row.status === 0) return 'row-status-uncomputed';
      if (row.status === 1) return 'row-status-computed';
      if (row.status === 2) return 'row-status-computing';
      return '';
    };

    onMounted(() => {
      fetchTableData();
      window.addEventListener('resize', handleResize);
      
    });

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });

    const form = reactive({
      name: '',
      region: '',
      date1: '',
      date2: '',
      delivery: false,
      type: [],
      resource: '',
      desc: '',

    });
    


    return {
      headerSearchForm,
      tableData,
      pagination,
      handleSearch,
      handleReset,
      handleSizeChange,
      handleCurrentChange,
      form,
      tableRowClassName,
      // expose formatters for template
      formatLightS1toS5,
      formatLightNewS1toS5,
      // expose options for dropdowns
      widthRangeOptions,
      thicknessRangeOptions,
      steelGradeRangeOptions,
      handleExport,
      bandCellClassName
      
    };
  },
});
</script>
<style scoped lang="less">
.msg-title {
  top: -4vh;
  left: 39.5vw;
  background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2vh;
  font-weight: bolder;
  width: 10vw;
}

:deep(.el-table .cell) {
  line-height: 12px;
  padding: 4px 8px;
}

::v-deep .el-table--enable-row-transition .el-table__body td {
  padding-top: 2px;
  padding-bottom: 2px;
}

::v-deep .el-table__header th {
  padding: 6px 0;
}

::v-deep .el-table__body tr {
  height: 32px;
}

::v-deep .el-table__body td {
  padding: 2px 4px;
}

/* 纵向分组底色：从“优化前压下率”到“优化后功率”的一级组交替浅蓝 */
::v-deep(.band-blue) { background-color: #f3f8ff !important; }

.row-status-uncomputed {
  background: #f5f5f5 !important;
  color: #bbb !important;
}
.row-status-computing {
  background: #fffbe6 !important;
}
.row-status-computed {
  background: #f6ffed !important;
}
.btn-disabled {
  background: #e0e0e0 !important;
  color: #aaa !important;
  border-color: #e0e0e0 !important;
  cursor: not-allowed !important;
}
.dot-loading {
  display: inline-block;
  font-size: 22px;
  letter-spacing: 2px;
  animation: dotWave 1s infinite linear;
}
@keyframes dotWave {
  0% { opacity: 1; }
  33% { opacity: 0.5; }
  66% { opacity: 0.2; }
  100% { opacity: 1; }
}
</style>
